<template>
  <div class="recruitment-container">
    <el-card>
      <div class="action-header">
        <h2>已入职人员列表</h2>
        <div class="actions">
          <el-button icon="el-icon-download" @click="exportData">导出数据</el-button>
        </div>
      </div>
    </el-card>

    <el-card class="mt-20">
      <div class="filter-controls">
        <el-input
            v-model="filter.keyword"
            placeholder="搜索姓名/职位"
            clearable
            style="width: 250px; margin-right: 15px;"
        />
        <el-select
            v-model="filter.department"
            placeholder="部门"
            clearable
            style="width: 180px; margin-right: 15px;"
        >
          <el-option label="技术部" value="tech" />
          <el-option label="市场部" value="market" />
          <el-option label="人力资源部" value="hr" />
          <el-option label="财务部" value="finance" />
        </el-select>
        <el-select
            v-model="filter.status"
            placeholder="状态"
            clearable
            style="width: 150px; margin-right: 15px;"
        >
          <el-option label="试用期" value="probation" />
          <el-option label="正式员工" value="regular" />
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </div>

      <el-table :data="filteredList" style="width: 100%" height="600">
        <el-table-column prop="name" label="姓名" width="120">
          <template #default="scope">
            <div class="employee-info">
              <el-avatar :size="40" :src="scope.row.avatar" />
              <span style="margin-left: 10px;">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="employeeId" label="工号" width="120" />
        <el-table-column prop="department" label="部门" width="180" />
        <el-table-column prop="position" label="职位" width="150" />
        <el-table-column prop="onboardDate" label="入职日期" width="150" />
        <el-table-column prop="probationEnd" label="试用期结束" width="150" />
        <el-table-column label="状态" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'probation' ? 'warning' : 'success'">
              {{ formatStatus(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button
                v-if="scope.row.status === 'probation'"
                size="small"
                type="success"
                @click="handleRegular(scope.row)"
            >转正</el-button>
            <el-button size="small" @click="handleView(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'OnboardedList',
  setup() {
    const filter = reactive({
      keyword: '',
      department: '',
      status: ''
    })

    const onboardedList = ref([
      {
        id: 1,
        name: '张明',
        employeeId: 'EMP10001',
        department: '技术部/前端组',
        position: '前端工程师',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        onboardDate: '2023-04-01',
        probationEnd: '2023-07-01',
        status: 'probation'
      },
      {
        id: 2,
        name: '李华',
        employeeId: 'EMP10002',
        department: '技术部/后端组',
        position: '后端工程师',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        onboardDate: '2023-03-15',
        probationEnd: '2023-06-15',
        status: 'regular'
      },
      {
        id: 3,
        name: '王芳',
        employeeId: 'EMP10003',
        department: '设计部',
        position: 'UI设计师',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        onboardDate: '2023-04-10',
        probationEnd: '2023-07-10',
        status: 'probation'
      }
    ])

    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(3)

    const filteredList = computed(() => {
      return onboardedList.value.filter(item => {
        const matchesKeyword = filter.keyword ?
            (item.name.includes(filter.keyword) || item.position.includes(filter.keyword)) : true

        const matchesDepartment = filter.department ?
            item.department.includes(filter.department) : true

        const matchesStatus = filter.status ?
            item.status === filter.status : true

        return matchesKeyword && matchesDepartment && matchesStatus
      })
    })

    const formatStatus = (status) => {
      const map = {
        probation: '试用期',
        regular: '正式员工'
      }
      return map[status] || status
    }

    const handleRegular = (row) => {
      ElMessage.success(`已为 ${row.name} 办理转正手续`)
      // 实际项目中这里会调用API更新状态
    }

    const handleView = (row) => {
      ElMessage.info(`查看详情: ${row.name}`)
      // 实际项目中这里会跳转到详情页
    }

    const exportData = () => {
      ElMessage.success('数据导出成功')
    }

    const search = () => {
      currentPage.value = 1
    }

    const handlePageChange = (page) => {
      currentPage.value = page
    }

    return {
      filter,
      onboardedList,
      currentPage,
      pageSize,
      total,
      filteredList,
      formatStatus,
      handleRegular,
      handleView,
      exportData,
      search,
      handlePageChange
    }
  }
}
</script>

<style scoped>
.recruitment-container {
  padding: 20px;
}

.action-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.filter-controls {
  display: flex;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.employee-info {
  display: flex;
  align-items: center;
}
</style>